<template >
    <div id="basic">
      <!-- <div class="title">儿童膳食测评报告</div> -->
      <!-- <div id="createTime">报告日期：{{ report_time }}</div> -->
      <!-- <el-divider  border-style="dashed"  style="border-color:#FF5C82">
        <div class="subTitle">基本信息</div>
      </el-divider> -->
      <div style="">
        <div style=" width: 100%; background-color:#FF5C82;  text-align: center; margin:auto">
          <div style="font-size: 40px; font-weight: bold; color: #ffffff;padding-top:20px;">{{ Titlename }}</div>
          <!-- <span style="font-size: 30px; color: #666666; margin-left: 20px;display: block;">基本信息报告</span> -->
          <div style="margin-top:30px;font-size: 24px;padding-bottom: 20px;font-weight: bold;color:#333333;">孕产妇营养风险评估与干预报告单</div>
        </div>
      </div>
     
      
      <div style="width: 100%; height: 40px; background-color: #FF5C82; margin-top: 10px; display: flex;">
            <div><img src="../../assets/img/12.jpg" style="height: 40px" alt="" /></div>
            <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">孕妇基本信息</div>
          </div>
          <div style="width: 1070px; border-top: 2px solid #FF5C82; border-right: 2px solid #FF5C82;  margin-top: 10px">
            <div style="display: flex">
              <div
                style="background-color: #FF5C82; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                检测日期</div>
              <div
                style="width: 90%; height: 40px; border-bottom: 2px solid #FF5C82; line-height: 40px; text-indent: 20px;">
                {{ report_time }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: #FF5C82; width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                孕妇姓名
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                {{ contents.username ?? '[]' }}
              </div>
              <div
                style="background-color: #FF5C82;width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82;">
                手机号
              </div>
              <div
                style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82;">
                {{ contents.guardian_mobile  ?? '[]' }}
              </div>
              <div
                style="background-color: #FF5C82; width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82;">
                年龄
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                {{ contents.age ?? '[]' }}岁
              </div>
              <div
                style=" background-color: #FF5C82; width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                身高
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #FF5C82;">
                {{ contents.height ?? '[]' }}CM
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                体重
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82; ">
                {{ contents.weight ?? '[]' }}KG
              </div>
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                孕周数
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82; ">
                {{ contents.gestational_weeks ?? '[]' }}周
              </div>
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                末次月经
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82; ">
                {{ contents.pre_weight ?? '[]' }}
              </div>
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                预产期
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #FF5C82;">
                {{ contents.edc ?? '[]' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                多胎
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82; ">
                {{ contents.twin ?? '[]' }}
              </div>
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                腹围
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px;  border-bottom: 2px solid #FF5C82; ">
                {{ contents.abdominal_girth ?? '[]' }}
              </div>
              <div
                style="width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-bottom: 2px solid #FF5C82;">
              
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-bottom: 2px solid #FF5C82; ">
               
              </div>
              <div
                style="width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-bottom: 2px solid #FF5C82;">
              
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #FF5C82;">
               
              </div>
            </div>
           
          </div>
          <!-- ----- -->
          <div style="width: 100%; height: 40px; background-color: #FF5C82; margin-top: 10px; display: flex;">
            <div><img src="../../assets/img/12.jpg" style="height: 40px" alt="" /></div>
            <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">其他信息</div>
          </div>
          <div style="width: 1070px; border-top: 2px solid #FF5C82; border-right: 2px solid #FF5C82;  margin-top: 10px">
            <div style="display: flex">
              <div
                style="background-color: #FF5C82; width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                生日
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                {{ contents.birthday ?? '[]' }}
              </div>
              <div
                style="background-color: #FF5C82;width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82;">
                未怀孕腹围
              </div>
              <div
                style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82;">
                {{ contents.pre_abdominal_girth  ?? '[]' }}
              </div>
              <div
                style="background-color: #FF5C82; width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82;">
                血型
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                {{ contents.xuexing_value ?? '[]' }}
              </div>
              <div
                style=" background-color: #FF5C82; width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                民族
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #FF5C82;">
                {{ contents.minzu_value ?? '[]' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                教育程度
              </div>
              <div
                style=" width: 90%; height: 40px; text-align: center; line-height: 40px;border-bottom: 2px solid #FF5C82; ">
                {{ contents.jiaoyu_value ?? '[]' }}
              </div>
              
            </div>
          </div>
          
          <!-- 其他信息 -->
          <div style="width: 100%;height: 40px;background-color: #FF5C82;margin-top: 10px;display: flex;">
            <div><img src="../../assets/img/12.jpg" style="height: 40px" alt="" /></div>
            <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
              主诉与病史
            </div>
          </div>
          <div style="width: 1070px; border-top: 2px solid #FF5C82; border-right: 2px solid #FF5C82; margin-top: 10px">
            <div style="display: flex">
              <div
                style="background-color: #FF5C82;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;display:flex;align-items: center;justify-content:center;">
                妊娠不良习惯
              </div>
              <div style="width: 90%;border-bottom: 2px solid #FF5C82;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.Bad_value ?? '[]' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: #FF5C82;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;display:flex;align-items: center;justify-content:center;">
                妊娠疾病情况
              </div>
              <div style="width: 90%;border-bottom: 2px solid #FF5C82;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.disease_value ?? '[]' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: #FF5C82;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;display:flex;align-items: center;justify-content:center;">
                过去疾病
              </div>
              <div style="width: 90%;border-bottom: 2px solid #FF5C82;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.Pastdisease_value ?? '[]' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: #FF5C82;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;display:flex;align-items: center;justify-content:center;">
                家族病史
              </div>
              <div style="width: 90%;border-bottom: 2px solid #FF5C82;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.family_history_value ?? '[]' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: #FF5C82;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;display:flex;align-items: center;justify-content:center;">
                孕期不良习惯
              </div>
              <div style="width: 90%;border-bottom: 2px solid #FF5C82;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.habits_value ?? '[]' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: #FF5C82;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;display:flex;align-items: center;justify-content:center;">
                水肿情况
              </div>
              <div style="width: 90%;border-bottom: 2px solid #FF5C82;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.edema_value ?? '[]' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: #FF5C82;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;display:flex;align-items: center;justify-content:center;">
                妊娠疾病
              </div>
              <div style="width: 90%;border-bottom: 2px solid #FF5C82;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.pregnancy_value ?? '[]' }}
              </div>
            </div>
          </div>
          <!-- 食物过敏 -->
          <div style="width: 100%;height: 40px;background-color: #FF5C82;margin-top: 10px;display: flex;">
            <div><img src="../../assets/img/12.jpg" style="height: 40px" alt="" /></div>
            <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
              食物过敏
            </div>
          </div>
          <div style="width: 1070px; border: 2px solid #FF5C82; margin-top: 10px">
            <div style="display: flex">
              <div
                style="background-color: #FF5C82;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;display:flex;align-items: center;justify-content:center;">
                过敏食物
              </div>
              <div style="width: 90%;border-bottom: 2px solid #FF5C82;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.allergy_value ?? '[]' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: #FF5C82;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;display:flex;align-items: center;justify-content:center;">
                食物不耐饿
              </div>
              <div style="width: 90%;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.intolerance_value ?? '[]' }}
              </div>
            </div>
          </div>
          <div style="width: 100%;height: 40px;background-color: #FF5C82;margin-top: 10px;display: flex;">
            <div><img src="../../assets/img/12.jpg" style="height: 40px" alt="" /></div>
            <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
              运动调查
            </div>
          </div>
          <div style="width: 1070px; border: 2px solid #FF5C82; margin-top: 10px">
            <div style="display: flex">
              <div
                style="background-color: #FF5C82;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;display:flex;align-items: center;justify-content:center;">
                危险运动
              </div>
              <div style="width: 90%;border-bottom: 2px solid #FF5C82;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.forbidLikeMotion_value ?? '[]' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: #FF5C82;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;display:flex;align-items: center;justify-content:center;">
                适合运动
              </div>
              <div style="width: 90%;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.LikeMotion_value ?? '[]' }}
              </div>
            </div>
          </div>
    </div>
  </template>
  
  <script setup>
  import {defineComponent, onMounted, ref, watch} from 'vue';
  import {useRoute, useRouter} from "vue-router"
  import http, {baseUrl} from "../../utils/http";
  import {ElMessage} from "element-plus";
  const contents = ref({})
  const reportId = ref()
  const router = useRouter()
  const route = useRoute()
  const hospital_name = ref()
  const report_time = ref()
  const birth = ref()
  const Titlename=ref()
  
  const username = ref()
  const guardian = ref()
  const birthStatus = ref()
  import PrintJS from 'print-js'
  
  const fetchData = async () => {
    reportId.value = route.params.reportId
    username.value = route.params.username
    guardian.value = route.params.guardian
    birthStatus.value = route.params.birth
    Titlename.value=localStorage.getItem('Title');
    http.get('api/archives/viewReportMember?id='+ reportId.value+'&username='+ username.value+'&guardian='+ guardian.value+'&birth='+ birthStatus.value).then((res)=> {
      if (res.data.code === 0) {
        ElMessage.error(res.data.msg)
      }
      report_time.value = res.data.data.times
      birth.value = $getTimes(res.data.data.contents.birth)
      contents.value = res.data.data.contents;
      // contents.births.value = '2077-07-07'
    })
  
    setTimeout(() => {
      print('print-all')
    }, 2000)
  
  }
  function $getTimes(params) {
    let date = new Date(params);
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    m = m < 10 ? "0" + m : m;
    let d = date.getDate();
    d = d < 10 ? "0" + d : d;
    const time = y + "-" + m + "-" + d;
    return time;
  }
  
  onMounted(() => {
    fetchData()
  })
  </script>
  
  <style scoped>
  #basic .title {
    font-size: 36px;
    width: 100%;
    text-align: center;
  }
  #basic #createTime {
    font-size: 16px;
    color:#999999;
    float: right;
  }
  
  .params {
    width: 100%;
    font-size: 22px;
    font-weight: bold;
  }
  .shu {
    width: 5px;
    height: 30px;
    background: #FF5C82;
    opacity: 1;
    border-radius: 100px;
    float: left;
    margin-right: 2%;
  }
  .subTitle {
    font-size: 30px;
    text-align: center;
    height: 30px;
    color: #FF5C82;
    /*border-bottom: 1px dashed  red;*/
  }
  .every {
    height: 35px;
    line-height: 35px;
    min-width: 33%;
    float: left;
    font-weight: bold;
  }
  #basic .symptom {
    text-align: left;
    line-height: 35px;
    float: left;
  }
  
  #basic {
    font-size: 16px;
    width: 1075px;
    min-height: 1244px;
    overflow: hidden;
    padding: 0;
    word-break:break-all;
    /*margin: 60px auto 0 auto;*/
    box-shadow: var(--el-box-shadow-light);
    border-radius: var(--el-card-border-radius);
    background-color: var(--el-card-bg-color);
    /* color: var(--el-text-color-primary); */
    transition: var(--el-transition-duration);
    --el-card-border-color: var(--el-border-color-light, #ebeef5);
    --el-card-border-radius: 4px;
    --el-card-padding: 20px;
    --el-card-bg-color: var(--el-color-white);
  }
  #basic .symptom .every {
    width: 30%;
    float: left;
  }
  .symptom_content{
    width: 100%;
    float: left;
  
  }
  
  </style>
  